<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar :fixed="true" :statusBar="true" @click-right="openAdd" :border="false">
			<!-- 左边 -->
			<block slot="left">
				<view class="nav-left u-f-ajc">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>
			<!-- 中间 -->

			<view class="nav-tab-bar u-f-ajc">
				<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap">
				</swiperTabHead>
			</view>
			<!-- 右边 -->
			<block slot="right">
				<view class="nav-right">
					<view class="icon iconfont icon-bianji1"></view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue";
	import swiperTabHead from '../../components/common/swiper-tab-head.vue';

	export default {
		components: {
			uniNavBar,
			swiperTabHead,
		},
		props:{
			tabBars:Array,
			tabIndex:Number
		},
		data() {
			return {
			}
		},
		methods: {
			//tabbar点击事件
			tabtap(index) {
				this.$emit("change-tab",index)
			},
			openAdd() {
				uni.navigateTo({
					url: "../add-input/add-input"
				})
			}
		}
	}
</script>

<style scoped>
	.nav-left,
	.nav-right {
		/* border: 1upx solid; */
	}

	.nav-left>view,
	.nav-right>view {
		font-size: 44upx;
	}

	.nav-left {
		color: #FF9619;
		margin-left: 6upx;
		margin-bottom: 5upx;
	}

	.nav-right {
		width: 100%;
	}

	.nav-tab-bar {
		width: 100%;
		margin-left: -30upx;
	}

</style>
